<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span style="color: #888;">状态：</span>
          <el-select filterable v-model="formInline.status" style="width:100px" @change="statusChange">
            <el-option v-for="item in stutas_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">门店：</span>
          <el-select filterable placeholder="请选择门店" v-model="store_id" style="width:300px">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">供应商：</span>
          <el-select filterable v-model="formInline.supplier_id">
            <el-option v-for="item in supplier_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查 询</el-button>
        </el-form-item>
      </el-form>
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" style="margin-top:20px;">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店" prop="store_name">
        </el-table-column>
        <el-table-column align="center" label="礼品破损图片" width="100">
          <template slot-scope="scope">
            <div v-viewer="options" :ref="'viewer'+scope.$index" class="image">
              <img v-for="item of scope.row.imgList" :src="item.thumb" :data-source="item.img" class="" :key="item.img" :alt="item.img.split('?image=').pop()">
            </div>
            <div class="images fit" style="margin:0 auto;">
              <img :src="scope.row.thumb" @click="showImg(scope.row,scope.$index)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品名称" prop="gift_name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="成本价" prop="money_cost">
          <template slot-scope="scope">
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量" prop="out_num"></el-table-column>
        <el-table-column align="center" label="供应商" prop="suppli_name">
        </el-table-column>
        <el-table-column align="center" label="入库时间" prop="in_time">
        </el-table-column>
        <el-table-column align="center" label="发现破损日期" prop="create_time" width="100px"></el-table-column>
        <el-table-column align="center" label="破损状况及原因" prop="break_reason" width="150px">
          <template slot-scope="scope">
            <p class="exceed_conceal">{{scope.row.break_reason}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购专员处理意见" prop="pur_make_one" width="150px">
          <template slot-scope="scope">
            <p class="exceed_conceal">{{scope.row.pur_make_one}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店处理情况" prop="store_make" width="150px">
          <template slot-scope="scope">
            <p class="exceed_conceal">{{scope.row.store_make}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购专员回馈情况" prop="pur_make_two" min-width="150px">
          <template slot-scope="scope">
            <p class="exceed_conceal">{{scope.row.pur_make_two}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="处理日期" prop="new_time"></el-table-column>
        <el-table-column align="center" label="操作" v-if="formInline.status=='0'">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="primary" size="mini" :disabled="scope.row.break_status!=1" v-if="scope.row.break_status!=3" plain>填写
            </el-button>
            <el-button @click="disposeClick(scope.row)" type="primary" size="mini" v-if="scope.row.break_status==3" plain>已处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
    <!-- 意见原因弹窗 -->
    <el-dialog :close-on-click-modal="false" title="礼品信息" width="600px" :visible.sync="uploadDialog" @close="closeDialog">
      <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm" label-position="top">
        <el-form-item>
          <div class="item">
            <div class="area_item">
              <span class="item_left">礼品名称</span>
              <p class="item_right">{{ruleForm.gift_name}}</p>
            </div>
            <div class="area_item">
              <span class="item_left">礼品编号</span>
              <p class="item_right">{{ruleForm.gift_id}}</p>
            </div>
          </div>
          <div class="item">
            <div class="area_item">
              <span class="item_left">入库时间</span>
              <p class="item_right">{{ruleForm.in_time}}</p>
            </div>
            <div class="area_item">
              <span class="item_left">发现破损时间</span>
              <p class="item_right">{{ruleForm.damaged_time}}</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="破损状况及原因">
          <el-input type="textarea" v-model="ruleForm.break_reason" :maxlength="999" disabled></el-input>
        </el-form-item>
        <el-form-item label="采购专员处理意见">
          <el-input type="textarea" v-model="ruleForm.pur_make_one" :maxlength="999" disabled></el-input>
        </el-form-item>
        <el-form-item label="门店处理情况">
          <el-input type="textarea" v-model="ruleForm.store_make" :maxlength="999" :disabled="ruleForm.break_status!=1"></el-input>
        </el-form-item>
        <el-form-item label="采购专员回馈情况">
          <el-input type="textarea" v-model="ruleForm.pur_make_two" :maxlength="999" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span style="color:red;margin-right:80px;font-size:12px;">注：“确定反馈”之后，内容将无法修改，请确认内容无误</span>
        <el-button type="primary" size="small" @click="comfirmFeedback()">确定反馈</el-button>
      </div>
    </el-dialog>
    <!-- 已处理弹窗 -->
    <el-dialog :visible.sync="dialogWarning" width="350px">
      <span>是否确定该破损礼品已处理结束</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogWarning = false">取消</el-button>
        <el-button type="primary" @click="comfirmFeedback()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { break_gift_img_list } from '@/api/storage_control/add_in_allocating.js';
import { getStoreList } from '@/api/warehouse/display_Stock';
import { getList, getPage, break_status_set } from '@/api/warehouse/damaged_gift_feedback';
import { getSupplier } from '@/api/common/gift_purchase.js';
import { pickerOptionsF, pickerDateDot } from '@/utils';
export default {
  data() {
    return {
      ruleForm: {
        pur_make_one: '',
        pur_make_two: '',
        store_make: '',
        break_reason: '',
        damaged_time: '',
        gift_name: '',
        gift_id: '',
        in_time: ''
      },
      uploadDialog: false,
      dialogWarning: false,
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateDot(),
      listLoading: false,
      list: [],
      currentPage: 1,
      storeList: null,
      totalDataNumber: 0,
      options: {
        toolbar: true,
        url: 'data-source'
      },
      stutas_list: [
        { id: '0', name: '待处理' },
        { id: '1', name: '已处理' }
      ],
      all_store_id: '',
      store_id: '',
      supplier_list: [],
      formInline: {
        supplier_list: [],
        status: '0',
        store_id: '',
        start_time: '',
        end_time: '',
        supplier_id: ''
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.storeList) {
        vm.getStore();
        vm.getSupplierList();
      }
    });
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    // 预览图片
    showImg(row, i) {
      let data = {
        store_id: row.store_id,
        gift_id: row.gift_id,
        transfer_order_id: row.transfer_order_id
      };
      if (!row.isclick) {
        break_gift_img_list(data).then(res => {
          row.isclick = true;
          if (res.data.length && res.data.length > 0) {
            row.imgList = res.data;
            setTimeout(() => {
              this.$refs['viewer' + i].$viewer.show();
            }, 100);
          } else {
            setTimeout(() => {
              this.$refs['viewer' + i].$viewer.show();
            }, 100);
          }
        });
      } else {
        setTimeout(() => {
          this.$refs['viewer' + i].$viewer.show();
        }, 100);
      }
    },
    // 获取供应商
    getSupplierList() {
      getSupplier({}).then(response => {
        if (!response) response = [];
        if (response.length > 1) {
          response.unshift({ id: '', name: '全部' });
        }
        this.supplier_list = response;
        this.formInline.supplier_id = this.supplier_list[0].id;
      });
    },
    closeDialog() {
      this.ruleForm.store_make = null;
    },
    statusChange() {
      this.fetchData();
    },
    // 填写
    editClick(row) {
      this.ruleForm = row;
      this.ruleForm.in_time = row.in_time;
      this.ruleForm.pur_make_one = row.pur_make_one;
      this.ruleForm.pur_make_two = row.pur_make_two;
      this.ruleForm.store_make = row.store_make;
      this.ruleForm.break_reason = row.break_reason;
      this.ruleForm.damaged_time = row.create_time;
      this.ruleForm.gift_name = row.gift_name;
      this.ruleForm.gift_id = row.id;
      this.ruleForm.break_status = row.break_status;
      this.uploadDialog = true;
    },
    // 反馈
    comfirmFeedback() {
      const { id, break_status } = this.ruleForm;
      let remark = break_status == '1' ? this.ruleForm.store_make : '';
      if (this.ruleForm.store_make == null) {
        this.$message.error('请填写门店处理情况');
        return;
      }
      break_status_set({ id: id, break_status: this.ruleForm.break_status / 1 + 1, remark: remark }).then(res => {
        if (res.code == 1) {
          this.$message.success(res.message);
          this.fetchData();
        }
      });
      this.uploadDialog = false;
      this.dialogWarning = false;
    },
    // 已处理
    disposeClick(row) {
      this.ruleForm = row;
      this.ruleForm.gift_id = row.id;
      this.ruleForm.break_status = row.break_status;
      this.dialogWarning = true;
    },
    // 获取门店
    getStore() {
      getStoreList({
        category_id: 668
      }).then(response => {
        this.all_store_id = '';
        let isAll = response.find(item => item.id == '0');
        if (isAll) {
          response.shift();
        }
        response.forEach(val => {
          this.all_store_id += val.id + ',';
        });
        this.all_store_id = this.all_store_id.substr(0, this.all_store_id.length - 1);
        if (response.length > 1) {
          response.unshift({ id: -1, name: '全门店' });
        }
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (this.storeList.length > 0) {
          this.store_id = this.storeList[0].id;
        }
      });
    },
    // 列表获取
    fetchData() {
      this.list = [];
      this.currentPage = 1;
      this.listLoading = true;
      if (this.store_id == -1) {
        this.formInline.store_id = this.all_store_id;
      } else {
        this.formInline.store_id = this.store_id;
      }
      this.formInline.start_time = this.pickerDate[0];
      this.formInline.end_time = this.pickerDate[1];
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.data.page * 20;
          getList(this.formInline).then(response => {
            response.data.forEach(val => {
              val.imgList = [{ img: val.img, thumb: val.thumb }];
            });
            this.list = response.data;
            this.listLoading = false;
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.data.forEach(val => {
          val.imgList = [{ img: val.img, thumb: val.thumb }];
        });
        this.list = response.data;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0;
}
.exceed_conceal {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}
.area_item {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_left {
  margin: 10px 0;
  display: inline-block;
  width: 30%;
  text-align: left;
}
.item_right {
  margin: 0;
  width: 68%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image {
  display: none;
}
</style>